<template>
    <div class="page-wrap" v-loading="globalLoading">
        <flexbox justify="space-between" align="flex-start" class="margin-b-16">
            <filter-form @search="handleSearch" ref="filterFormRef" :type="type" />
            <flexbox>
                <a-radio-group style="min-width: 220px" v-model:value="type" button-style="solid" @change="handleRadioChange">
                    <a-radio-button value="0">需求跟踪矩阵</a-radio-button>
                    <a-radio-button value="1">版本能效统计</a-radio-button>
                </a-radio-group>
                <a-button class="margin-l-8" type="primary" @click="initData" v-auth="'energyManage.jiraTrack.createData'">生成数据</a-button>
                <a-tooltip title="表格列配置">
                    <column-setting ref="columnSettingRef" class="margin-l-8" :columns="settingColumns" @setColumns="setColumns" />
                </a-tooltip>
            </flexbox>
        </flexbox>
        <div v-if="tableColumns.length">
            <custom-table
                :loading="loadingObj"
                autoResize
                rowKey="id"
                size="small"
                :columns="tableColumns"
                :data-source="list"
                :pagination="paginationConfig"
                @change="handleTableChange"
                v-if="type === '0'"
            >
                <template #status="{ text }">
                    <flexbox>
                        <h-status-badge :status="text" />
                    </flexbox>
                </template>
                <template #submitTime="{ text }">
                    <span>{{ $filters.dateFilter(text) }}</span>
                </template>
                <template #confirmTime="{ text }">
                    {{ $filters.dateFilter(text) }}
                </template>
                <template #randdStartTime="{ text }">
                    {{ $filters.dateFilter(text) }}
                </template>
                <template #randdEndTime="{ text }">
                    {{ $filters.dateFilter(text) }}
                </template>
                <template #testStartTime="{ text }">
                    {{ $filters.dateFilter(text) }}
                </template>
                <template #testEndTime="{ text }">
                    {{ $filters.dateFilter(text) }}
                </template>
                <template #onlineTime="{ text }">
                    {{ $filters.dateFilter(text) }}
                </template>
                <template #action="{ record }">
                    <a @click="jumpTo(record.id)">详情</a>
                </template>
            </custom-table>
            <custom-table
                autoResize
                :loading="loadingObj"
                rowKey="id"
                size="small"
                :columns="tableColumns"
                :data-source="list"
                :pagination="paginationConfig"
                @change="handleTableChange"
                :expandIcon="handleExpandIcon"
                @expand="onExpandChange"
                v-else
            >
                <template #story="{ record }">
                    <span v-if="record.issueKey">{{ record.summary }}</span>
                    <span class="font-w-b primary-color" v-else>{{
                        record.pmpJiraIssueTrackTimeDTOS ? record.pmpJiraIssueTrackTimeDTOS.length : 0
                    }}</span>
                </template>
                <template #planWorkHours="{ record, text }">
                    <span v-if="record.issueKey">{{ text }}</span>
                    <span class="font-w-b primary-color" v-else>{{ text }}</span>
                </template>
                <template #expendWorkHours="{ record, text }">
                    <span v-if="record.issueKey">{{ text }}</span>
                    <span class="font-w-b primary-color" v-else>{{ text }}</span>
                </template>
            </custom-table>
        </div>
    </div>
</template>

<script lang="tsx">
import FilterForm from './components/FilterForm.vue';
import api from '@/api';
import { useRouter, useRoute} from 'vue-router';
import { useTableData, useTableLoading, usePagination, useTableColumns, useTableExpand, useTableFormSearch, useTableToolbar } from '@/components/Table/hooks/index';
import { useMountedAndActivated } from '@/hooks/common/useMountedAndActivated';
import { useSyncRequest } from './hooks/useJiraSyncRequest';
import { HStatusBadge, CustomTable, ColumnSetting } from '@/components';
import { defineComponent, reactive, ref, unref, toRefs, nextTick } from 'vue';
import { message } from 'ant-design-vue/es';
export default defineComponent({
    name: 'requireTrack',
    components: {
        FilterForm,
        HStatusBadge,
        CustomTable,
        ColumnSetting
    },
    setup() {
        const router = useRouter();
        
        const { loading, setLoading } = useTableLoading();
        const { paginationConfig, setPaginationConfig } = usePagination();
        const { columns: tableColumns, setColumns, settingColumns } = useTableColumns('requireJiraTrack');
        const { list, searchQuery, getList, setList, handleTableChange, setSearchQuery, setTableNo, clearSearchQuery } = useTableData(setLoading, paginationConfig, setPaginationConfig, 'requireJiraTrack');
        const { handleExpandIcon, onExpandChange } = useTableExpand('pmpJiraIssueTrackTimeDTOS', list, setList);
        const { handleSearch } = useTableFormSearch(setPaginationConfig, setSearchQuery, getList);
        const { exportAllFile } = useTableToolbar(searchQuery, paginationConfig);
        const { loadingObj, syncDataFromJira } = useSyncRequest(loading, setLoading);
        const columnSettingRef = ref<any>();
        const filterFormRef = ref<any>();
        const globalLoading = ref<boolean>(false);
        const state = reactive<any>({
            type:'0',
            locale: { emptyText: () => <a-empty>
                <a-button type="primary" onClick={initData}>生成数据</a-button>
            </a-empty>}
        });
        // 按钮触发初始化数据
        const initData = async () => {
            if (!+unref(filterFormRef).form.systemId) {
                message.error('暂无权限');
                return;
            }
            // globalLoading.value = true;
            const fn = () => {
                getList();
            };
            syncDataFromJira(api.jiraIssueTrackModel.initData, {
                systemId: +unref(filterFormRef).form.systemId
            }, fn);
            // globalLoading.value = false;
        };

        const handleRadioChange = (e) => {
            const type = e.target.value;
            setPaginationConfig({
                current: 1
            });
            unref(filterFormRef).handleReset();
            
            let no = '';
            switch (type) {
                case '0':
                    no = 'requireJiraTrack';
                    break;
                case '1':
                    no = 'versionJiraTrack';
                    break;
            }
            const targetColumn = useTableColumns(no);
            nextTick(() => {
                clearSearchQuery();
                setSearchQuery({
                    ...unref(filterFormRef).queryForm
                });
                setTableNo(no);
                setColumns(targetColumn.settingColumns.value, no);
                unref(columnSettingRef).init();
            });
        };

        const jumpTo = (id) => {
            const path = '/energyManage/jiraTrack/detail';
            const query = { id };
            router.push({
                path,
                query
            });
        };
        useMountedAndActivated(getList, false);
        return {
            ...toRefs(state),
            exportAllFile,
            list,
            tableColumns,
            settingColumns,
            loading,
            handleExpandIcon,
            paginationConfig,
            handleTableChange,
            onExpandChange,
            handleSearch,
            getList,
            setColumns,
            columnSettingRef,
            filterFormRef,
            initData,
            globalLoading,
            handleRadioChange,

            loadingObj,
            jumpTo
        };
    }
});
</script>

<style scoped lang="less">
.page-wrap {
    min-height: 100%;
    padding: 12px 24px;
    background: #fff;
}
</style>